<template>
<view>
<!--pages/tools/jiatingyaohao/index/index.wxml-->
<image src="http://imgbdb3.bendibao.com/xcx/20207/01/2020701092644_57337.png" class="main-img"></image>
<view class="warn">提醒:目前为征求意见阶段，仅供参考。正式文件发布会更新。</view>
<view class="main-content">
  <form catchsubmit="formSubmit">
    <view v-for="(type, index) in typeData" :key="index" class="content-item">
      <view class="people-border">
        <view class="people-type">{{type.peopleType}}</view>
        <view class="score">积分：{{type.score}}</view>
      </view>
      <checkbox-group @change="checkboxChange" :data-index="index" :name="type.name">
        <view v-for="(item, index2) in type.checkbox" :key="index2" class="checkbox-item">
          <checkbox :value="item.value" color="#5395de"></checkbox>
          <text>{{item.selectName}}</text>
        </view>
      </checkbox-group>
      <view class="input-box" v-if="type.showladder">
        <text>当前阶梯倍数</text>
        <!-- value="{{inputValue}}" -->
        <input type="number" :name="type.inputname" @input="bindinput" :data-index="index">
      </view>
    </view>
    <view class="nav">
      <view class="addbtn" @tap="addChildren">+ 添加子女</view>
      <navigator class="btn" url="/pages/article/detail/detail?id=275231&city=bj&type=article">积分规则</navigator>
    </view>
    <button class="resultbtn" form-type="submit">计算结果</button>
  </form>
</view>
</view>
</template>

<script>
// pages/tools/jiatingyaohao/index/index.js
var num = 1;

export default {
  data() {
    return {
      resultData: 0,
      inputValue: 0,
      scoreData: 0,
      typeData: [{
        peopleType: "主申请人",
        showladder: false,
        score: 0,
        name: "mainPeople",
        inputname: "mainPeopleInput",
        checkbox: [{
          value: 2,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }, {
        peopleType: "配偶",
        showladder: false,
        score: 0,
        name: "peiou",
        inputname: "peiouInput",
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }, {
        peopleType: "主申请人的父亲",
        showladder: false,
        score: 0,
        name: "mainfather",
        inputname: "mainfatherInput",
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }, {
        peopleType: "主申请人的母亲",
        showladder: false,
        score: 0,
        name: "mainmother",
        inputname: "mainmotherInput",
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }, {
        peopleType: "配偶的父亲",
        showladder: false,
        name: "peioufather",
        inputname: "peioufatherInput",
        score: 0,
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }, {
        peopleType: "配偶的母亲",
        showladder: false,
        name: "peioumother",
        inputname: "peioumotherInput",
        score: 0,
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }, {
        peopleType: "子女",
        showladder: false,
        score: 0,
        name: "children",
        inputname: "childrenInput1",
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      }]
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "北京小客车家庭摇号积分计算器",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: "北京小客车家庭摇号积分计算器",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    formSubmit(e) {
      let resData = e.detail.value;
      let first = resData.children != '' || resData.mainPeople != '' || resData.peiou != '' || resData.mainfather != '' || resData.mainmother != '' || resData.peioufather != '' || resData.peioumother != '';
      let second = (resData.mainPeople != '' || resData.peiou != '') && (resData.mainfather != '' || resData.mainmother != '' || resData.peioufather != '' || resData.peioumother != '') || resData.children != '' && (resData.mainPeople != '' || resData.peiou != '') || resData.children != '' && (resData.mainfather != '' || resData.mainmother != '' || resData.peioufather != '' || resData.peioumother != '');
      let third = resData.children != '' && (resData.mainPeople != '' || resData.peiou != '') && (resData.mainfather != '' || resData.mainmother != '' || resData.peioufather != '' || resData.peioumother != '');
      let sum = 0;
      this.typeData.forEach((v, k) => {
        sum += Number(v.score);
      });

      if (third) {
        uni.showModal({
          title: '计算结果',
          content: '家庭积分' + sum * 3,
          showCancel: false
        });
      } else if (second) {
        uni.showModal({
          title: '计算结果',
          content: '家庭积分' + sum * 2,
          showCancel: false
        });
      } else if (first) {
        uni.showModal({
          title: '计算结果',
          content: '家庭积分' + sum * 1,
          showCancel: false
        });
      }
    },

    checkboxChange(e) {
      let index = e.currentTarget.dataset.index;
      let value = e.detail.value;
      let flag = value.find(item => item === "参与摇号");
      let scoreData = value.find(item => item != "参与摇号");

      if (flag == "参与摇号") {
        this.typeData.forEach((v, k) => {
          if (k == index) {
            v.showladder = true;
          }
        });
        this.setData({
          typeData: this.typeData
        });
      } else {
        this.typeData.forEach((v, k) => {
          if (k == index) {
            v.showladder = false;
          }
        });
        this.setData({
          typeData: this.typeData
        });
      }

      this.typeData.forEach((v, k) => {
        if (k == index) {
          v.score = Number(scoreData ? scoreData : 0) + Number(this.inputValue);
        }
      });
      this.setData({
        typeData: this.typeData,
        scoreData: scoreData ? scoreData : 0
      });
    },

    addChildren(e) {
      num++;
      this.typeData.push({
        peopleType: "子女",
        showladder: false,
        score: 0,
        name: "children",
        inputname: "childrenInput" + num,
        checkbox: [{
          value: 1,
          selectName: "参与家庭积分"
        }, {
          value: "参与摇号",
          selectName: "参与摇号"
        }]
      });
      this.setData({
        typeData: this.typeData
      });
    },

    bindinput(e) {
      let index = e.currentTarget.dataset.index;
      let inputValue = e.detail.value;
      this.typeData.forEach((v, k) => {
        if (k == index) {
          v.score = Number(this.scoreData) + Number(inputValue);
        }
      });
      this.setData({
        typeData: this.typeData
      });
    }

  }
};
</script>
<style>
/* pages/tools/jiatingyaohao/index/index.wxss */
.main-img{width: 100%;height: 276rpx;}
.warn{background-color: #fffbe8;font-size: 26rpx;color: #f2954d;padding: 15rpx 20rpx;}
.main-content{margin: 30rpx;}
.content-item{border-bottom:1rpx solid #ccc;padding: 15rpx 0;}
.people-border{display: flex;align-items: center;justify-content: space-between;}
.people-type{font-size: 30rpx;color: #141414;}
.score{font-size: 30rpx;color: #989696;}
.checkbox-group{display: flex;flex-direction: column;}
.checkbox-item{margin: 20rpx 0}
.checkbox-item text{font-size: 30rpx;color: #141414;}
.input-box{display: flex;align-items: center;margin: 20rpx 0;}
.input-box text{font-size: 30rpx;font-weight: 500;color: #141414;}
.input-box input{width: 100rpx;border: 1rpx solid #444343;margin: 0 10rpx; padding-left: 5rpx;}

.nav{display: flex;align-items: center;justify-content: center;margin-top: 50rpx;}
.addbtn{border: 4rpx solid #ff0000;border-radius: 40rpx;padding: 20rpx 80rpx;text-align: center;
font-size: 30rpx;color:#ff0000;margin-right: 30rpx;}
.btn{border: 4rpx solid #3886d8;border-radius: 40rpx;padding: 20rpx 80rpx;text-align: center;
font-size: 30rpx;color:#3886d8;margin-right: 30rpx;}
.resultbtn{background-color:#3886d8;border-radius: 40rpx; text-align: center;
font-size: 30rpx;color:#fff;padding: 5rpx 0;margin:40rpx 0;}

</style>